/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20231210
* @version:0.3.0
* @type:interface
* @description:
* # STag
* A small tag used to display data
* ## properties inherits SCard
* - in property <string> text : text in tag
* ## functions
* pure public function get() -> string : get tag text
* public function set(value:string) : set tag text
* ## callbacks
* - callback clicked(string) : run if you click the tag
* ============================================
*/
import { ROOT_STYLES,DefaultSTagProps } from "../../themes/index.slint";
import { SText } from "../text/index.slint";
import { SCard } from "../card/index.slint";
import { Themes } from "../../use/index.slint";

export component Tag inherits SCard { 
  in-out property <string> text : DefaultSTagProps.text;
  out property <bool> hover <=> area.has-hover;
  in property <MouseCursor> mouse-cursor <=> area.mouse-cursor;
  callback clicked(string);
  pure public function get() -> string {
    return inner.get();
  }
  public function set(value:string) {
    text = value;
  }
  card-height: inner.height;
  card-width: inner.width;
  border-radius: self.height / 2;
  font-color<=> inner.color;
  font-weight: DefaultSTagProps.font-weight;
  font-italic: DefaultSTagProps.font-italic;
  font-family: DefaultSTagProps.font-family;
  font-size:DefaultSTagProps.font-size;
  padding-type: DefaultSTagProps.padding-type;
  border-type: DefaultSTagProps.border-type;
  shadow-type: DefaultSTagProps.shadow-type;
  theme: DefaultSTagProps.theme;
  area:= TouchArea {
    z: 13;
    mouse-cursor: pointer;
    clicked => {
      root.clicked(root.text);
    }
    inner:=SText{
      theme: root.theme;
      z:12;
      text: root.text;
      font-size: root.font-size;
      font-weight: root.font-weight;
      font-family: root.font-family;
      font-italic: root.font-italic;
    }
  }
} 
 